<template>
  <!-- 新增：评价弹窗 -->
  <el-dialog
    v-model="props.dialogVisible"
    title="我的评价"
    width="750px"
    align-center
  >
    <div class="appraise-dialog">
      <div class="title">课程评价</div>
      <el-row class="dialog-rate" align="middle">
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">难易程度：</span>
            <ScoreRate v-model="form.difficulty" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">内容设置：</span>
            <ScoreRate v-model="form.content" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">学习效果：</span>
            <ScoreRate v-model="form.effect" :max="5" />
          </div>
        </el-col>
      </el-row>
      <div class="title">教师评价</div>
      <el-row class="dialog-rate" align="middle">
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">教师能力：</span>
            <ScoreRate v-model="form.ability" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">课堂互动：</span>
            <ScoreRate v-model="form.interaction" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">教学服务：</span>
            <ScoreRate v-model="form.service" :max="5" />
          </div>
        </el-col>
      </el-row>
      <el-input
        v-model="form.contentText"
        type="textarea"
        :rows="4"
        placeholder="请输入"
      />
    </div>
    <template #footer>
      <el-button type="primary" @click="submitAppraise">确认</el-button>
      <el-button @click="handleShowCancel">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: () => flse,
  },
});
// 评价表单
const form = ref({
  difficulty: 0,
  content: 0,
  effect: 0,
  ability: 0,
  interaction: 0,
  service: 0,
  contentText: "",
});
const emits = defineEmits(["handleSubmit", "handleCancelDialogVisible"]);

const submitAppraise = () => {
  // 这里可以提交表单数据
  emits("handleSubmit", form.value);
  // 清空表单
  // form.value = {
  //     difficulty: 0,
  //     content: 0,
  //     effect: 0,
  //     ability: 0,
  //     interaction: 0,
  //     service: 0,
  //     contentText: ''
  // }
};
const handleShowCancel = () => {
  emits("handleCancelDialogVisible");
};

const resetForm = () => {
  form.value = {
    difficulty: 0,
    content: 0,
    effect: 0,
    ability: 0,
    interaction: 0,
    service: 0,
    contentText: "",
  };
};

// 暴露方法给父组件
defineExpose({
  resetForm,
});
</script>

<style>
.appraise-dialog {
  width: 100%;
}

.appraise-dialog .title {
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 16px;
  color: #1e2021;
  text-align: left;
  margin-bottom: 14px;
}

.appraise-dialog .dialog-rate {
  margin-bottom: 30px;
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 16px;
  color: #656c7e;
  text-align: left;
}

.appraise-dialog .dialog-rate .dialog-rate-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.rate-label {
  margin-right: 4px;
  color: #666;
  font-size: 14px;
}

.dialog-rate {
  margin-bottom: 20px;
}
</style>
